<!--
 * @Author       : 哈喽 1599321283@qq.com
 * @Date         : 2025-03-16 21:40
 * @LastEditors  : 哈喽 1599321283@qq.com
 * @LastEditTime : 2025-03-19 20:33
 * @FilePath     : /练习/aaa/src/views/fortune/result.vue
 * @Description  : 算命结果页面
-->
<template>
  <div class="result-container">
    <!-- 顶部导航 -->
    <div class="nav-header glass-effect">
      <van-icon name="arrow-left" size="24" @click="goBack" />
      <h2>算命结果</h2>
      <van-icon name="share-o" size="24" @click="showShare = true" />
    </div>
    
    <!-- 命盘信息卡片 -->
    <div class="chart-card glass-effect">
      <div class="user-info">
        <div class="avatar">{{ nameInitials }}</div>
        <div class="info">
          <h3>{{ name }}</h3>
          <p>{{ genderText }} · {{ birthDate }}</p>
        </div>
      </div>
      
      <div class="chart-detail">
        <!-- 八字信息 -->
        <template v-if="type === 'bazi'">
          <div class="pillar-container">
            <div v-for="(pillar, index) in baziInfo.pillars" :key="index" class="pillar glass-effect">
              <div class="pillar-name">{{ pillar.name }}</div>
              <div class="pillar-content">
                <span class="heavenly">{{ pillar.heavenly }}</span>
                <span class="earthly">{{ pillar.earthly }}</span>
              </div>
            </div>
          </div>
          
          <div class="five-elements">
            <div v-for="(element, index) in baziInfo.fiveElements" :key="index" class="element">
              <span class="element-name">{{ element.name }}</span>
              <div class="element-bar">
                <div
                  class="element-value"
                  :style="{ width: `${element.value}%`, backgroundColor: element.color }"
                ></div>
              </div>
              <span class="element-percent">{{ element.value }}%</span>
            </div>
          </div>
        </template>
      </div>
    </div>
    
    <!-- 分析结果区域 -->
    <div class="analysis-section">
      <!-- 选项卡 -->
      <van-tabs v-model:active="activeTab" animated swipeable color="#8b5cf6">
        <van-tab v-for="tab in analysisTabs" :key="tab.id" :title="tab.title">
          <div class="tab-content glass-effect">
            <div v-for="(section, index) in tab.sections" :key="index" class="analysis-item">
              <h4>{{ section.title }}</h4>
              <p>{{ section.content }}</p>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    
    <!-- 会员专属区域 -->
    <div class="premium-section glass-effect">
      <div class="premium-content">
        <div class="premium-icon">
          <van-icon name="gem-o" size="32" />
        </div>
        <div class="premium-info">
          <h3>会员专属深度解析</h3>
          <p>解锁更深入的命盘分析、每日运势推送</p>
        </div>
      </div>
      <van-button type="primary" class="custom-btn" @click="gotoMembership">成为会员</van-button>
    </div>
    
    <!-- 其他服务推荐 -->
    <div class="services-section">
      <h3 class="section-title">相关服务推荐</h3>
      <div class="service-list">
        <div
          v-for="service in relatedServices"
          :key="service.id"
          class="service-item glass-effect"
          @click="gotoService(service)"
        >
          <van-icon :name="service.icon" size="24" />
          <span>{{ service.name }}</span>
        </div>
      </div>
    </div>
    
    <!-- 分享弹窗 -->
    <van-share-sheet
      v-model:show="showShare"
      title="分享给好友"
      :options="shareOptions"
      @select="onShareSelect"
    />
  </div>
</template>

<script setup lang="ts" name="FortuneResult">
import { computed, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { showToast } from "vant";

const route = useRoute();
const router = useRouter();

// 获取路由参数
const type = route.query.type as string;
const name = route.query.name as string;
const gender = route.query.gender as string;
const birthday = route.query.birthday ? new Date(Number(route.query.birthday)) : new Date();
const birthTime = route.query.birthTime ? Number(route.query.birthTime) : 0;

// 计算姓名首字母
const nameInitials = computed(() => {
  if (!name) return "?";
  return name.substring(0, 1);
});

// 性别文本
const genderText = computed(() => {
  console.log(gender);
  return gender === "female" ? "女" : "男";
});

// 生日文本
const birthdayText = computed(() => {
  if (!birthday) return "";
  return `${birthday.getFullYear()}年${birthday.getMonth() + 1}月${birthday.getDate()}日`;
});

const aiResponse =[JSON.parse(route.query.aiResponse)] ;

console.log(999999999 + aiResponse)
const birthDate = route.query.birthDate;
console.log(aiResponse);
// 选项卡
const activeTab = ref(0);
const analysisTabs = reactive([
  {
    id: 1,
    title: "性格特点",
    sections: [
      {
        title: "性格优势",
        content: aiResponse[0]["性格优势"]
      },
      {
        title: "潜在弱点",
        content: aiResponse[0]["潜在弱点"]
      }
    ]
  },
  {
    id: 2,
    title: "事业财运",
    sections: [
      {
        title: "事业发展",
        content: aiResponse[0]["事业发展"]
      },
      {
        title: "财富状况",
        content: aiResponse[0]["财富状况"]
      }
    ]
  },
  {
    id: 3,
    title: "感情健康",
    sections: [
      {
        title: "感情状况",
        content: aiResponse[0]["感情状况"]
      },
      {
        title: "健康提示",
        content: aiResponse[0]["健康提示"]
      }
    ]
  }
]);

// 八字命盘信息
const baziInfo = reactive({
  pillars: [
    { name: "年柱", heavenly: "", earthly: "" },
    { name: "月柱", heavenly: "", earthly: "" },
    { name: "日柱", heavenly: "", earthly: "" },
    { name: "时柱", heavenly: "", earthly: "" }
  ],
  fiveElements: [
    { name: "金", value: 0, color: "#FFD700" },
    { name: "木", value: 0, color: "#4CAF50" },
    { name: "水", value: 0, color: "#2196F3" },
    { name: "火", value: 0, color: "#FF5722" },
    { name: "土", value: 0, color: "#795548" }
  ]
});

// 相关服务
const relatedServices = reactive([
  { id: 1, name: "合婚配对", icon: "like-o", path: "/fortune/match" },
  { id: 2, name: "桃花运势", icon: "flower-o", path: "/fortune/love" },
  { id: 3, name: "事业分析", icon: "medal-o", path: "/fortune/career" }
]);

// 分享功能
const showShare = ref(false);
const shareOptions = [
  { name: "微信", icon: "wechat" },
  { name: "朋友圈", icon: "wechat-moments" },
  { name: "QQ", icon: "qq" },
  { name: "微博", icon: "weibo" },
  { name: "复制链接", icon: "link" }
];

// 生成测算结果
const generateResult = () => {
  // 根据用户信息生成八字命盘
  // 这里是模拟数据，实际应用中需要根据生日、时辰等计算八字
  const earthlyBranches = ["子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌", "亥"];
  const heavenlyStem = ["甲", "乙", "丙", "丁", "戊", "己", "庚", "辛", "壬", "癸"];
  
  // 根据生日生成四柱
  const year = birthday.getFullYear();
  const month = birthday.getMonth() + 1;
  const day = birthday.getDate();
  
  // 年柱 (简化计算)
  const yearIndex = (year - 4) % 10;
  const yearEarthlyIndex = (year - 4) % 12;
  
  // 月柱 (简化计算)
  const monthIndex = (yearIndex % 5 * 2 + month) % 10;
  const monthEarthlyIndex = (month + 1) % 12;
  
  // 日柱 (简化计算)
  const dayIndex = (year * 5 + Math.floor(year / 4) + day) % 10;
  const dayEarthlyIndex = (year * 5 + Math.floor(year / 4) + day) % 12;
  
  // 时柱 (简化计算)
  const timeIndex = (dayIndex * 2 + Math.floor(birthTime / 2)) % 10;
  const timeEarthlyIndex = Math.floor(birthTime / 2) % 12;
  
  baziInfo.pillars = [
    { name: "年柱", heavenly: aiResponse[0]['年柱'][0], earthly: aiResponse[0]['年柱'][1] },
    { name: "月柱", heavenly: aiResponse[0]['月柱'][0], earthly: aiResponse[0]['月柱'][1] },
    { name: "日柱", heavenly: aiResponse[0]['日柱'][0], earthly: aiResponse[0]['日柱'][1] },
    { name: "时柱", heavenly: aiResponse[0]['时柱'][0], earthly: aiResponse[0]['时柱'][1] }
  ];
  
  // 根据八字计算五行分布
  // 这里使用模拟数据，实际应用中需要根据八字计算五行的分布情况
  baziInfo.fiveElements = [
    { name: "金", value: aiResponse[0]['五行分布']['金'], color: "#FFD700" },
    { name: "木", value: aiResponse[0]['五行分布']['木'], color: "#4CAF50" },
    { name: "水", value: aiResponse[0]['五行分布']['水'], color: "#2196F3" },
    { name: "火", value: aiResponse[0]['五行分布']['火'], color: "#FF5722" },
    { name: "土", value: aiResponse[0]['五行分布']['土'], color: "#795548" }
  ];
  
  // 调整五行百分比总和为100%
  let total = 0;
  baziInfo.fiveElements.forEach(element => {
    total += element.value;
  });
  
  baziInfo.fiveElements.forEach(element => {
    element.value = Math.floor(element.value / total * 100);
  });
  
  // 确保总和为100
  let currentTotal = 0;
  baziInfo.fiveElements.forEach(element => {
    currentTotal += element.value;
  });
  
  if (currentTotal < 100) {
    baziInfo.fiveElements[0].value += (100 - currentTotal);
  } else if (currentTotal > 100) {
    baziInfo.fiveElements[0].value -= (currentTotal - 100);
  }
};

// 分享处理
const onShareSelect = (option) => {
  showToast(`已分享到${option.name}`);
  showShare.value = false;
};

// 跳转到会员页面
const gotoMembership = () => {
  router.push("/membership");
};

// 跳转到相关服务
const gotoService = (service) => {
  router.push(service.path);
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 页面加载时生成结果
onMounted(() => {
  generateResult();
});
</script>

<style lang="less" scoped>
:deep(.van-tabs__nav) {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3.2vw;
}
.result-container {
  min-height: 100vh;
  padding: 16px;
  background: linear-gradient(135deg, #1a103c 0%, #2d1b4e 100%);
  color: #fff;
}

.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  margin-bottom: 20px;
  border-radius: 12px;
  
  h2 {
    margin: 0;
    font-size: 18px;
    color: #fff;
  }
}

.chart-card {
  padding: 20px;
  border-radius: 16px;
  margin-bottom: 20px;
  
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    
    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
      font-size: 20px;
      font-weight: bold;
      margin-right: 12px;
    }
    
    .info {
      h3 {
        margin: 0 0 4px 0;
        font-size: 18px;
      }
      
      p {
        margin: 0;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
}

.chart-detail {
  .pillar-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    
    .pillar {
      width: 18%;
      text-align: center;
      padding: 12px 8px;
      border-radius: 12px;
      
      .pillar-name {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 8px;
      }
      
      .pillar-content {
        display: flex;
        flex-direction: column;
        
        .heavenly {
          font-size: 20px;
          font-weight: bold;
          color: #c4b5fd;
          margin-bottom: 4px;
        }
        
        .earthly {
          font-size: 20px;
          font-weight: bold;
          color: #f5d0fe;
        }
      }
    }
  }
  
  .five-elements {
    .element {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      
      .element-name {
        width: 30px;
        font-size: 14px;
      }
      
      .element-bar {
        flex: 1;
        height: 10px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        margin: 0 12px;
        overflow: hidden;
        
        .element-value {
          height: 100%;
          border-radius: 5px;
          transition: width 0.5s ease;
        }
      }
      
      .element-percent {
        width: 40px;
        font-size: 14px;
        text-align: right;
      }
    }
  }
}

.analysis-section {
  margin-bottom: 20px;
  
  .tab-content {
    padding: 16px;
    border-radius: 12px;
    margin-top: 16px;
  }
  
  .analysis-item {
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    h4 {
      font-size: 16px;
      margin: 0 0 8px 0;
      color: #c4b5fd;
    }
    
    p {
      font-size: 14px;
      line-height: 1.6;
      margin: 0;
      color: rgba(255, 255, 255, 0.9);
    }
  }
}

.premium-section {
  padding: 16px;
  border-radius: 16px;
  margin-bottom: 24px;
  
  .premium-content {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    
    .premium-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(139, 92, 246, 0.2);
      margin-right: 16px;
      
      .van-icon {
        color: #c4b5fd;
      }
    }
    
    .premium-info {
      h3 {
        margin: 0 0 4px 0;
        font-size: 16px;
      }
      
      p {
        margin: 0;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
  
  .custom-btn {
    width: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, #6d28d9 0%, #8b5cf6 100%);
    border: none;
  }
}

.services-section {
  .section-title {
    font-size: 18px;
    margin: 24px 0 16px;
    color: #c4b5fd;
  }
  
  .service-list {
    display: flex;
    justify-content: space-between;
    
    .service-item {
      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 8px;
      border-radius: 12px;
      transition: transform 0.3s ease;
      
      &:active {
        transform: scale(0.95);
      }
      
      .van-icon {
        margin-bottom: 8px;
        color: #c4b5fd;
      }
      
      span {
        font-size: 14px;
      }
    }
  }
}

/* 自定义vant组件样式 */
:deep(.van-tabs__line) {
  background-color: #8b5cf6;
}

:deep(.van-tab) {
  color: rgba(255, 255, 255, 0.7);
}

:deep(.van-tab--active) {
  color: #fff;
  font-weight: bold;
}

/* 玻璃拟态效果 */
.glass-effect {
  //width: 31%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
</style> 